<template>
<div class="wrapper">
 <div class="header-wrapper">
   <div class="header-title">
     <span>空气质量-{{airText}}</span>
     <span>{{city}}--{{area}}</span>
   </div>
   <div class="header-text">
    <span>{{airValue}}</span>
    <span>{{weather}}</span>
    </div>
   <div class="header-advice">{{weatherAdvice}}</div>
 </div>
 <div class="body-wrapper">
   <div class="body">
     <div class="data-wrapper">
       <div class="data">
         <img class="data-logo" src="/static/images/temperature.png" />
         <div class="data-text">
           <div class="data-title">温度</div>
           <div class="data-value">{{temperature}}℃</div>
         </div>
       </div>
       <div class="data">
         <img class="data-logo" src="/static/images/humidity.png" />
         <div class="data-text">
           <div class="data-title">湿度</div>
           <div class="data-value">{{humidity}}%</div>
         </div>
       </div>
     </div>
     <div class="data-wrapper">
       <div class="data">
         <img class="data-logo" src="/static/images/led.png" />
         <div class="data-text">
           <div class="data-title">开关</div>
           <div class="data-value">
             <switch @change="LedStatus"  :checked="led" color="#3d7ef9"  />
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>
</template>

<script>
import {connect} from "mqtt";

const MqttConnect='wxs://stm32.mqtt-8266.xyz:8084/mqtt'

export default {
  data () {
    return {
      client:{},
      temperature:0,
      humidity:0,
      led:false,
      area:'请求中',//城区
      city:'请求中',//城市
      airText:'请求中',//空气质量
      airValue:0,//空气指数
      weather:'请求中',//天气
      weatherAdvice:'请求中'//天气建议
    }
  },

  components: {
  
  },

  methods: {
    LedStatus(event){
    var that=this
    let sw=event.mp.detail.value
    that.led=sw
    if(sw)
    {
      that.client.publish('SmartHome','{"target":"LED","value":1}',function(err){
        if(!err)
        console.log("成功开灯")
      })
    }
    else
    {
      that.client.publish('SmartHome','{"target":"LED","value":0}',function(err){
        if(!err)
        console.log("成功关灯")
      })
    }
    }
  },
  onShow(){
    var that=this;
    that.client =connect(MqttConnect)
    that.client.on('connect',function(){
      console.log("成功连上MQTT服务器！")
      that.client.subscribe("SmartHome",function(err){
        if(!err){
          console.log("成功订阅了SmartHome主题")
        }
      })
    })
    that.client.on('message',function(topic,message){
      console.log(topic)
      //message打印不会转成字符串,而是16进制数据
      let data_switch={}
      data_switch=JSON.parse(message)
      /*对上行数据进行处理*/
      that.temperature=data_switch.temperature
      that.humidity=data_switch.humidity
      /* 前端下行数据 */
    });
    wx.getLocation({
    type: 'wgs84',
    success (res) {
    const latitude = res.latitude
    const longitude = res.longitude
    const key='8764f0013a2e401784b402743ef3740b'
    wx.request({
    url: `https://geoapi.heweather.net/v2/city/lookup?location=${longitude},${latitude}&key=${key}`, //获取位置信息
    success (res) {
      const{adm2,name}=res.data.location[0]
      that.area=name
      that.city=adm2
          }
        })
    wx.request({
    url: `https://devapi.heweather.net/v7/weather/now?location=${longitude},${latitude}&key=${key}`, //获取天气数据API接口
    success (res) {
      const{text}=res.data.now
      that.weather=text
      wx.request({
      url: `https://devapi.heweather.net/v7/air/now?location=${longitude},${latitude}&key=${key}`, //获取位置信息
      success (res) {
      const{aqi,category}=res.data.now
      that.airText=category
      that.airValue=aqi
             }
            })
          }
        })
    wx.request({
    url: `https://devapi.heweather.net/v7/indices/1d?type=6&location=${longitude},${latitude}&key=${key}`, //获取位置信息
    success (res) {
      const{text}=res.data.daily[0]
      that.weatherAdvice=text
            }
         })
        }
      })
   }
}
</script>

<style lang="scss" scoped>
.wrapper{
  padding:  15px;
  .header-wrapper{
    background-color: #3d7ef9;
    border-radius:  20px;
    color: #fff;
    box-shadow: #d6d6d6 0px 0px 5px;
    padding:  15px  30px;
    .header-title{
      display:  flex;
      justify-content: space-between;
    }
    .header-text{
      font-size: 32px;
      font-weight: 12px;
      display:  flex;
      justify-content: space-between;
    }
    .header-advice{
      margin-top: 20px;
      font-size: 12px;
    }
  }
  .data-wrapper{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .data{
      background-color: #fff;
      width: 150px;
      height: 80px ;
      border-radius: 20px;
      display:flex;
      justify-content: space-between;
      padding: 0px  8px;
      box-shadow: #d6d6d6 0px 0px 5px;
      .data-logo{
        height: 40px;
        width: 50px;
        margin-top: 15px;
      }
      .data-text{
        margin-top: 15px;
        color: #7f7f7f;
        .data-value{
          font-size: 26px;
        }
      }
    }
  }
}
</style>
